<template>
    <!-- 群聊详情 -->
    <ContentPanel>
        <div class="group-info-item">
            <div class="group-title">群封面：</div>
            <div class="group-value">
                <Avatar :userId="groupInfo.groupId"></Avatar>
            </div>
            <!-- 操作按钮 -->
            <el-dropdown placement="bottom-end" trigger="click">
                <span class="el-dropdown-link">
                    <div class="iconfont icon-gengduo"></div>
                </span>
                <template #dropdown>
                    <el-dropdown-menu v-if="groupInfo.groupOwnerId == userInfoStore.getUserInfo().userId">
                        <el-dropdown-item @click="editGroupInfo">修改群聊信息</el-dropdown-item>
                        <el-dropdown-item @click="disbandGroup">解散群聊</el-dropdown-item>
                    </el-dropdown-menu>
                    <el-dropdown-menu v-else>
                        <el-dropdown-item @click="leaveGroup">退出群聊</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="group-info-item">
            <div class="group-title">群ID：</div>
            <div class="group-value">{{ groupInfo.groupId }}</div>
        </div>
        <div class="group-info-item">
            <div class="group-title">群名称：</div>
            <div class="group-value">{{ groupInfo.groupName }}</div>
        </div>
        <div class="group-info-item">
            <div class="group-title">群成员数：</div>
            <div class="group-value">{{ groupInfo.memberCount }}</div>
        </div>
        <div class="group-info-item">
            <div class="group-title">加入权限：</div>
            <div class="group-value">
                {{ groupInfo.joinType == "JOIN_DIRECTLY" ? '直接加入' : '群主同意后加入' }}
            </div>
        </div>
        <div class="group-info-item notice">
            <div class="group-title">群公告：</div>
            <div class="group-value">{{ groupInfo.groupNotice || '-' }}</div>
        </div>
        <div class="group-info-item">
            <div class="group-title"></div>
            <div class="group-value">
                <el-button type="primary" @click="sendMessage">发送消息</el-button>
            </div>
        </div>
    </ContentPanel>
    <GroupEditDialog ref="groupEditDialogRef" @reloadGroupInfo="getGroupInfo(groupInfo.groupId)"></GroupEditDialog>
</template>

<script setup>
import GroupEditDialog from "./GroupEditDialog.vue";
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import { useUserInfoStore } from "@/stores/UserInfoStore"
const userInfoStore = useUserInfoStore()
import { useContactStateStore } from "@/stores/ContactStateStore"
const contactStateStore = useContactStateStore()

const groupInfo = ref({})
const groupId = ref()

const getGroupInfo = async (contactId) => {
    let result = await proxy.Request({
        method: "get",
        url: proxy.Api.getGroupInfo,
        params: {
            groupId: contactId,
        }
    })
    if (!result) {
        return;
    }
    groupInfo.value = result.data;
}

/* 监听路由带的参数的变化改变右侧数据 */
watch(
    () => route.query.contactId,
    (newValue, oldVale) => {
        if (newValue) {
            getGroupInfo(newValue);
        }
    },
    { immediate: true, deep: false }
)

const groupEditDialogRef = ref()

/* 修改群聊信息 */
const editGroupInfo = () => {
    groupEditDialogRef.value.show(groupInfo.value)
}

/* 解散群聊 */
const disbandGroup = () => {
    contactStateStore.setContactReload(null)  // 置空防止原本状态和要修改的状态相同导致不刷新列表数据
    proxy.Confirm({
        message: "确定解散该群聊吗？",
        okFun: async () => {
            let result = await proxy.Request({
                method: "delete",
                url: proxy.Api.disbandGroup,
                params: {
                    groupId: groupInfo.value.groupId,
                }
            })
            if (!result) {
                return;
            }
            proxy.Message.success("解散群聊成功")
            contactStateStore.setContactReload("DISBAND_GROUP")
        }
    })
}

/* 退出群聊 */
const leaveGroup = () => {
    contactStateStore.setContactReload(null)  // 置空防止原本状态和要修改的状态相同导致不刷新列表数据
    proxy.Confirm({
        message: "确定退出该群聊吗？",
        okFun: async () => {
            let result = await proxy.Request({
                method: "post",
                url: proxy.Api.leaveGroup,
                params: {
                    groupId: groupInfo.value.groupId,
                }
            })
            if (!result) {
                return;
            }
            proxy.Message.success("退出群聊成功")
            contactStateStore.setContactReload("LEAVE_GROUP")

        }
    })
}

/* 发送消息 */
const sendMessage = () => {
    // 跳转到聊天界面，传递群聊id和当前时间戳的参数
    router.push({
        path: "/chat",
        query: {
            chatId: groupInfo.value.groupId,
            timestamp: new Date().getTime(),
        }
    })
}
</script>

<style lang="scss" scoped>
.group-info-item {
    display: flex;
    margin-top: 30px;
    align-items: center;

    .group-title {
        width: 100px;
        text-align: right;
    }

    .group-value {
        margin-right: auto;
    }
}

.icon-gengduo {
    font-size: 15px;
    color: #3b3b3b;
    width: 30px;
    height: 20px;
    text-align: center;

    &:hover {
        background: #dddddd;
    }
}

.notice {
    align-items: flex-start;
}
</style>
